<template>
  <div class="coll-page">
    <n-tabs default-value="my" type="line" @update:value="currenChange">
      <n-tab-pane
        v-for="item in list"
        :key="item.name"
        :name="item.name"
        :tab="item.title"
      ></n-tab-pane>
    </n-tabs>
    <template v-if="curren === 'my' && !isDetail">
      <div class="coll-list">
        <div class="upload-card" @click="handAdd">
          <i class="esayIcon esayIcon-jia"></i>
          <span>新建文件夹</span>
        </div>
        <div
          class="coll-card"
          v-for="item in tableData"
          :key="item.id"
          @click="handOpen(item)"
        >
          <div class="cover">
            <img v-if="item.cover" class="cover" :src="item.cover" alt="" />
            <i v-else class="esayIcon esayIcon-tupian"></i>
          </div>
          <div class="info">
            <div class="row flex flex-between">
              <div class="name u-line-1">{{ item.name }}</div>
              <div class="more" v-if="!item.isDefault">
                <n-popover style="padding: 0" trigger="hover">
                  <template #trigger>
                    <i class="esayIcon esayIcon-gengduo1"></i>
                  </template>
                  <div class="operation-coll-page">
                    <div class="operation-item" @click="handEdit(item)">
                      编辑
                    </div>
                    <div class="operation-item" @click="handDel(item)">
                      删除
                    </div>
                  </div>
                </n-popover>
              </div>
            </div>
            <div class="photo-num">
              <img src="@/assets/icon/user/img.png" alt="" />
              <span>{{ item.coll_count }}</span>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <template v-if="isDetail">
        <div>
          <n-button type="tertiary" @click="handBackList">返回</n-button>
        </div>
      </template>
      <template v-else>
        <n-tabs
          v-model:value="tableInfo.queryForm.type_id"
          type="line"
          @update:value="tabChange"
        >
          <n-tab-pane name="" tab="全部"></n-tab-pane>
          <n-tab-pane
            v-for="item in clasifyList"
            :key="item.id"
            :name="item.id"
            :tab="item.name"
          ></n-tab-pane>
        </n-tabs>
      </template>

      <template
        v-if="tableInfo.tableData.length === 0 && !tableInfo.listLoading"
      >
        <div class="empty">
          <n-empty size="large" description="暂无数据~"></n-empty>
        </div>
      </template>
      <template v-else>
        <n-spin :show="tableInfo.listLoading">
          <div class="list-wai">
            <div class="two-list">
              <div
                class="tow-card"
                v-for="item in tableInfo.tableData"
                :key="item.id"
                @click="handDetail(item)"
              >
                <img class="cover" :src="item.cover" alt="" />
                <div class="names">
                  <div class="name u-line-1">{{ item.name }}</div>
                  <div class="typename">
                    <span>{{ item.photo_count }}P</span>
                    <span v-if="item.video_count > 0">
                      {{ item.video_count }}V
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="pagination">
            <n-pagination
              v-model:page="tableInfo.queryForm.current"
              :page-count="tableInfo.total"
              :page-sizes="tableInfo.pageSizes"
              show-quick-jumper
              show-size-picker
              @updatePage="pageChange"
              @updatePageSize="sizeChange"
            ></n-pagination>
          </div>
        </n-spin>
      </template>
    </template>
    <add-favorites ref="addRef" @success="init" />
    <cancel-dia ref="cancelRef" @confirm="handConfirm" />
  </div>
</template>
<script setup lang="ts">
import { defineAsyncComponent, onActivated, onMounted, ref } from 'vue'
import { useApi } from '@/hooks/useApi'
import { useRouter } from 'vue-router'
import workApi from '@/service/api/work'
import collApi from '@/service/api/coll'
import homeApi from '@/service/api/home'

const AddFavorites = defineAsyncComponent(
  () => import('@/components/AddFavorites.vue')
)
const CancelDia = defineAsyncComponent(
  () => import('./components/CancelDia.vue')
)
defineOptions({
  name: 'UserColl'
})
const router: any = useRouter()
interface filterItem {
  id: number | null
  name: string
}

const clasifyList = ref<filterItem[]>([])
const getClassify = async () => {
  const { data } = await homeApi.tabs()
  clasifyList.value = data
}
getClassify()
const curren = ref('my')
const currenChange = (e: string) => {
  curren.value = e
  delete tableInfo.queryForm.work_id
  isDetail.value = false
  if (e === 'all') {
    tableInfo.queryForm.type_id = ''
    queryData()
  }
}
const tabChange = () => {
  queryData()
}
const { tableInfo, queryData, pageChange, sizeChange, fetchData } = useApi({
  isPaging: true,
  isRequest: false,
  getData: collApi.list,
  initForm: {
    work_id: '',
    type_id: ''
  }
})
const isDetail = ref(false)
const handBackList = () => {
  isDetail.value = false
}
const handOpen = (e: any) => {
  tableInfo.queryForm.work_id = e.id
  queryData()
  isDetail.value = true
}

/**
 *  文件架
 * */
const list = [
  {
    name: 'my',
    title: '我的收藏夹'
  },
  {
    name: 'all',
    title: '全部收藏'
  }
]

const cancelRef = ref()
let oldId = ''
const handDel = (row: any) => {
  oldId = row.id
  cancelRef.value.open()
}
const handConfirm = async () => {
  const { code, message } = await workApi.del({
    id: oldId
  })
  if (code !== 200) {
    msgUtil.$message.error(message)
    return
  }
  msgUtil.$message.success('删除成功')
  init()
}
const addRef = ref()
const handAdd = () => {
  addRef.value.open()
}
const handEdit = (row: any) => {
  addRef.value.open(row)
}

interface listItem {
  id: number
  title: string
  isDefault: boolean
  cover: string
  description: string
  coll_count: number
}

const tableData = ref<listItem[]>([])
const init = async () => {
  const { data } = await workApi.list()
  tableData.value = data
}
const handDetail = (e: any) => {
  router.push({
    path: e.book_type === 1 ? '/mhdetail' : '/detail',
    query: {
      id: e.id
    }
  })
}
onActivated(() => {
  fetchData()
})
onMounted(() => {
  init()
})
</script>

<style scoped lang="scss">
.coll-page {
  min-height: 1420px;
  background: #fff;
  padding: 20px;

  .empty {
    width: 100%;
    padding-top: 150px;
    display: flex;
    justify-content: center;
  }

  .list-wai {
    margin-top: 20px;
    min-height: 450px;
  }

  .two-list {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;

    .tow-card {
      width: 259px;
      background: #f5f5f5;
      border-radius: 8px;
      transition: all 0.3s;
      cursor: pointer;

      .cover {
        width: 259px;
        height: 210px;
        border-radius: 8px 8px 0 0;
        object-fit: cover;
      }

      .names {
        display: flex;
        justify-content: space-between;
        padding: 14px 12px;

        .name {
          flex: 1;
          font-size: 14px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          color: #333333;
        }

        .typename {
          font-size: 14px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          color: #333333;
        }
      }

      &:hover {
        box-shadow: 0px 0 10px 1px rgba(0, 0, 0, 0.16);
        transform: translate3d(0, -8px, 0);
      }
    }
  }

  .coll-list {
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;

    .upload-card {
      width: 259px;
      height: 285px;
      background: #f5f5f5;
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      i {
        font-size: 80px;
        color: #999999;
      }

      span {
        margin-top: -15px;
        font-size: 16px;
        color: #999999;
        letter-spacing: 1px;
      }
    }

    .coll-card {
      width: 259px;
      height: 285px;
      background: #f5f5f5;
      border-radius: 8px;
      box-sizing: border-box;
      padding: 10px;
      cursor: pointer;

      .cover {
        width: 239px;
        height: 190px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: 239px;
          height: 190px;
          border-radius: 4px;
          object-fit: cover;
          display: block;
        }

        .landscape-tupian {
          font-size: 45px;
          color: #999;
        }
      }

      .info {
        margin-top: 12px;

        .name {
          font-size: 14px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          color: #333333;
        }

        .more i {
          font-size: 16px;
          font-weight: bold;
          cursor: pointer;
        }

        .photo-num {
          display: flex;
          align-items: center;
          margin-top: 12px;

          img {
            width: 16px;
            height: 16px;
            display: block;
          }

          span {
            margin-left: 4px;
            font-size: 12px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            color: #999999;
          }
        }
      }
    }
  }
}

.pagination {
  padding: 20px;
  display: flex;
  justify-content: center;
}
</style>
<style lang="scss">
.operation-coll-page {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 2px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0px 0 10px 1px rgba(0, 0, 0, 0.16);

  .operation-item {
    font-size: 12px;
    font-weight: 400;
    color: #333333;
    cursor: pointer;
    padding: 5px 10px;
    text-align: center;
    transition: all 0.3s;

    &:hover {
      background: #f5f5f5;
    }
  }
}
</style>
